let arr = [
    "../img/picture1.jpg",
    "../img/picture2.jpg",
    "../img/picture3.jpg",
    "../img/picture4.jpg",
    "../img/picture5.jpg",
];
let arrDs = [];//定时
let n = 0;//数组索引
//左边按钮点击
function toLeft() {
    n--;
    if (n === -1) {
        n = 4;
    }
    //改变图片
    let l = document.getElementById("loop");
    l.src = arr[n];
    let arrLi = document.getElementsByClassName("num-li");
    //改变span
    for (let i = 0; i < arrLi.length; i++) {
        if (i === n) {
            arrLi[i].style.backgroundColor = "red";
            arrLi[i].style.border = "0";
        } else {
            arrLi[i].style.backgroundColor = "rgba(0,0,0,0)";
            arrLi[i].style.border = "2px solid #ffffff";
        }
    }
    //改变文字
    let arrArt = document.getElementsByClassName("art");
    for (let m = 0; m < arrArt.length; m++) {
        if (m === n) {
            arrArt[m].style.opacity = "1";
            arrArt[m].style.zIndex = "111";
        } else {
            arrArt[m].style.opacity = "0";
            arrArt[m].style.zIndex = "-111";
        }
    }
}

let temp;

//右边按钮点击
function toRight() {
    n++;
    if (n === 5) {
        n = 0;
    }
    temp = n;
    //改变图片
    let l = document.getElementById("loop");
    l.src = arr[n];
    //span 动
    let arrLi = document.getElementsByClassName("num-li");
    for (let i = 0; i < arrLi.length; i++) {
        if (i === n) {
            arrLi[i].style.backgroundColor = "red";
            arrLi[i].style.border = "0";
        } else {
            arrLi[i].style.backgroundColor = "rgba(0,0,0,0)";
            arrLi[i].style.border = "2px solid #ffffff";
        }
    }
    //文字动
    let arrArt = document.getElementsByClassName("art");
    for (let m = 0; m < arrArt.length; m++) {
        if (m === n) {
            arrArt[m].style.opacity = "1";
            arrArt[m].style.zIndex = "111";
        } else {
            arrArt[m].style.opacity = "0";
            arrArt[m].style.zIndex = "-111";
        }
    }
}

//点击span
onload = () => {
    let arrLi = document.getElementsByClassName("num-li");
    for (let i = 0; i < arrLi.length; i++) {
        arrLi[i].onclick = () => {
            //改变图片
            //n=i;
            let pic = document.getElementById("loop");
            pic.src = arr[i];
            //改变span颜色
            let arrLi = document.getElementsByClassName("num-li");
            for (let m = 0; m < arrLi.length; m++) {
                if (m === i) {
                    arrLi[m].style.backgroundColor = "red";
                    arrLi[m].style.border = "0";
                } else {
                    arrLi[m].style.backgroundColor = "rgba(0,0,0,0)";
                    arrLi[m].style.border = "2px solid #ffffff";
                }
            }
            //改变文字
            let arrArt = document.getElementsByClassName("art");
            for (let a = 0; a < arrArt.length; a++) {
                if (a === i) {
                    arrArt[a].style.opacity = "1";
                    arrArt[a].style.zIndex = "111";
                } else {
                    arrArt[a].style.opacity = "0";
                    arrArt[a].style.zIndex = "-111";
                }
            }
        };
        //鼠标悬浮改变span颜色
        arrLi[i].onmouseover = () => {
            arrLi[i].style.backgroundColor = "#fff"
        };
        //离开时改变span颜色
        arrLi[i].onmouseout = () => {
            arrLi[i].style.border = "2px solid #ffffff";
            arrLi[i].style.backgroundColor = "rgba(0,0,0,0)"
            if (i === n) {
                arrLi[i].style.backgroundColor = "red"
                arrLi[i].style.border = "0"
            }
        }
    }
};
//定时轮播
let autoLoop = window.setInterval("toRight()", 1000);//自动开始

function stopLoop() {
    clearInterval(autoLoop)   //鼠标悬停结束
    for (let i = 0; i < arrDs.length; i++) {
        clearInterval(arrDs[i]);
    }
}

//鼠标离开时开始
function startLoop() {
    for (let i = 0; i < arrDs.length; i++) {
        clearInterval(arrDs[i]);//如果有，清除上次定时
    }
    let num = setInterval("toRight()", 1000);
    arrDs.push(num);
}